<template>
  <div class="report-head-wrapper">
    <i>{{ CONSTANTS.LABEL_ASSESSMENTREPORT }}</i
    ><i>{{ lastItem.slashDate }}</i
    ><img :src="IMAGES.share" id="report-head-shareicon" @click="onShare" />
  </div>
</template>
<script>
import * as CONSTANTS from '@/constants/index'
import { mapGetters } from 'vuex'
import ALLIMAGES from '@/utils/images/index'
import * as UTILS from '@/utils/index'

export default {
  props: {},
  components: {},
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
    }
  },
  computed: {
    ...mapGetters(['user', 'quiz']),
    isDev() {
      return process.env.NODE_ENV === CONSTANTS.VAR_NODE_ENV_DEV
    },
    IMAGES() {
      return ALLIMAGES.quiz
    },
    historyList() {
      if (!this.quiz) return {}
      return this.quiz.historyList
    },
    lastItem() {
      if (!this.historyList) return {}
      return this.historyList.lastItem
    },
    currentBabyData() {
      if (!this.user) return {}
      return this.user.currentBabyData
    },
  },
  mounted() {},
  filters: {},
  watch: {},
  methods: {
    async onShare() {
      let userId = this.user.currentUserId
      let babyId = this.user.currentBabyId
      let { id } = this.lastItem
      let { nickName, head } = this.currentBabyData
      let title = `${nickName}${CONSTANTS.LABEL_SHAREPAGETITLE}`
      let params = { userId, babyId, recordId: id, title }

      if (!this.isDev && UTILS.isAndroidDevice())
        return await this.onAndroidShare(params)
      if (!this.isDev && UTILS.isIOSDevice())
        return await this.onIOSShare(params)
      if (!this.isDev) return
    },
    onIOSShare(params) {
      let userId = params.userId
      let babyId = params.babyId
      let recordId = params.recordId
      let data = {
        title: params.title,
        subTitle: CONSTANTS.LABEL_SHAREPAGESUBTITLE,
        webUrl: `h5.alilo.com.cn/assessment?recordId=${recordId}&userId=${userId}&babyId=${babyId}&isShare=true`,
      }
      window.webkit.messageHandlers.webShare.postMessage(data)
    },
    onAndroidShare(params) {
      let userId = params.userId
      let babyId = params.babyId
      let recordId = params.recordId
      let data = {
        title: params.title,
        subTitle: CONSTANTS.LABEL_SHAREPAGESUBTITLE,
        webUrl: `http://h5.alilo.com.cn/assessment?recordId=${recordId}&userId=${userId}&babyId=${babyId}&isShare=true`,
      }

      window.android.playCourse('webShare', JSON.stringify(data))
    },
  },
}
</script>

<style lang="less" scoped>
.report-head-wrapper {
  margin-top: 30px;
  width: 100%;
  height: 18px;
  // background-color: #ff0000;
  display: flex;
  align-items: flex-end;
  // min-height: 100%;
  & > i {
    font-style: normal;
    display: inline-block;
  }

  & > i:first-of-type {
    line-height: 18px;
    font-family: 'SourceHanSansCN-Medium';
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.8);
  }

  & > i:nth-of-type(2) {
    margin-left: 12px;
    line-height: 13px;
    font-family: 'SourceHanSansCN-Normal';
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.3);
  }

  & > img {
    margin-left: auto;
    width: 18px;
    height: 18px;
  }
}
</style>
